<template>
  <div class="gyk-curd-template-container" v-loading="pageLoading">
    <!-- 头部查询表单 -->
    <CommonSearchBox :visible="showSearch" :searchForm="searchForm" :labelWidth="'100px'"
      :searchColumnInfoList="searchColumnInfoList" :foreignKeyMap="foreignKeyMap" :dictMap="dictMap" @reset="resetQuery"
      @handleQuery="getList">
    </CommonSearchBox>

    <!-- 通用的简单curd表格 -->
    <div class="gyk-common-curd-table">
      <!-- 右键菜单 -->
      <div v-show="showRightClickMenu" class="gyk-right-click-menu">
        <div @click="menuDetails">详情(P)</div>
        <div @click="menuAdd">添加(I)</div>
        <div @click="menuEdit">编辑(E)</div>
        <div @click="editAllInfo">修改配置(A)</div>
        <div @click="frontNoShow">不展示(S)</div>
        <div @click="menuDelete">删除(D)</div>
      </div>

      <!-- 右键菜单展示得抽屉 -->
      <el-drawer :title="drawerTitle" v-model="drawerVisible" ref="drawer" direction="rtl">
        <div class="demo-drawer__content">
          <el-form :model="columnForm" :disabled="columnFormDisabled">
            <el-form-item label="表名" :label-width="columnFormLabelWidth">
              <el-input id="tableId" v-show="false" v-model="columnForm.tableId" autocomplete="off"></el-input>
              <el-input id="tableComment" :disabled="true" v-model="columnForm.tableComment"
                autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="英文列名" :label-width="columnFormLabelWidth">
              <el-input v-model="columnForm.columnName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="列描述" :label-width="columnFormLabelWidth">
              <el-input v-model="columnForm.columnComment" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="物理类型" :label-width="columnFormLabelWidth">
              <el-input v-model="columnForm.columnType" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="java类型" :label-width="columnFormLabelWidth">
              <el-select v-model="columnForm.javaType">
                <el-option v-for="dict in defProps.dictStore.dictMap.get('sys_java_type')" :key="dict.value"
                  :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>

            <el-form-item label="java字段名" :label-width="columnFormLabelWidth">
              <el-input v-model="columnForm.javaField" autocomplete="off"></el-input>
            </el-form-item>

            <el-row>
              <el-col :span="12">
                <el-form-item label="是否主键" :label-width="columnFormLabelWidth">
                  <el-checkbox true-label="1" false-label="0" v-model="columnForm.isPk"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否自增" :label-width="columnFormLabelWidth">
                  <el-checkbox true-label="1" false-label="0" v-model="columnForm.isIncrement"></el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="是否必填" :label-width="columnFormLabelWidth">
                  <el-checkbox true-label="1" false-label="0" v-model="columnForm.isRequired"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否插入" :label-width="columnFormLabelWidth">
                  <el-checkbox true-label="1" false-label="0" v-model="columnForm.isInsert"></el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="是否编辑" :label-width="columnFormLabelWidth">
                  <el-checkbox true-label="1" false-label="0" v-model="columnForm.isEdit"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否列表" :label-width="columnFormLabelWidth">
                  <el-checkbox true-label="1" false-label="0" v-model="columnForm.isList"></el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="后端条件" :label-width="columnFormLabelWidth">
                  <el-checkbox true-label="1" false-label="0" v-model="columnForm.isQuery"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="前端查询" :label-width="columnFormLabelWidth">
                  <el-checkbox true-label="1" false-label="0" v-model="columnForm.isFrontQuery"></el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="是否外键" :label-width="columnFormLabelWidth">
                  <el-checkbox true-label="1" false-label="0" v-model="columnForm.isForeignKey"></el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item v-show="columnForm.isForeignKey == '1'" :label-width="columnFormLabelWidth">
              <span slot="label">
                <el-tooltip :content="`tableName：查询的表名、value：对应的列、label：显示的列、commonQuery：通用查询，例如allTable，表示查询所有表的数据`"
                  placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
                外键选项
              </span>
              <el-input @click.native="clickForeignKeyInput" type="textarea" readonly rows="5"
                v-model="columnForm.foreignKeyOption" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="查询方式" :label-width="columnFormLabelWidth">
              <el-select v-model="columnForm.queryType">
                <el-option label="=" value="EQ" />
                <el-option label="!=" value="NE" />
                <el-option label=">" value="GT" />
                <el-option label=">=" value="GTE" />
                <el-option label="<" value="LT" />
                <el-option label="<=" value="LTE" />
                <el-option label="LIKE" value="LIKE" />
                <el-option label="BETWEEN" value="BETWEEN" />
              </el-select>
            </el-form-item>

            <el-form-item label="显示类型" :label-width="columnFormLabelWidth">
              <el-select v-model="columnForm.htmlType">
                <el-option label="文本框" value="input" />
                <el-option label="文本域" value="textarea" />
                <el-option label="下拉框" value="select" />
                <el-option label="单选框" value="radio" />
                <el-option label="复选框" value="checkbox" />
                <el-option label="日期控件" value="datetime" />
                <el-option label="图片上传" value="imageUpload" />
                <el-option label="文件上传" value="fileUpload" />
                <el-option label="富文本控件" value="editor" />
              </el-select>
            </el-form-item>

            <el-form-item label="字典类型" :label-width="columnFormLabelWidth">
              <el-select v-model="columnForm.dictType" clearable filterable placeholder="请选择">
                <el-option v-for="dict in dictOptions" :key="dict.dictType" :label="dict.dictName" :value="dict.dictType">
                  <span style="float: left">{{ dict.dictName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    dict.dictType
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="宽度" :label-width="columnFormLabelWidth">
              <el-input v-model="columnForm.width" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="排序" :label-width="columnFormLabelWidth">
              <el-input v-model="columnForm.sort" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="cancelColumnForm">取 消</el-button>
            <el-button v-show="columnFormSubmitBtnVisible" :loading="columnFormLoading" type="primary"
              @click="columnFormBtnSubmitEvent">{{ columnFormLoading ? "提交中 ..." : "确 定" }}</el-button>
          </div>
        </div>
      </el-drawer>

      <!-- 增删改查按钮 -->
      <div class="gyk-curd-btn-box">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5" v-for="item in tableTopButtonList" :key="item.menuId">
            <el-button :type="item.sysButtonOption.type" plain :icon="item.sysButtonOption.icon" size="small"
              @click="_btnClickEvent(item, {})" :disabled="buttonDisabled(item)" :key="item.menuId"
              v-hasPermi="[item.perms]">{{
                item.sysButtonOption.name }}</el-button>
          </el-col>

          <!-- 右侧工具栏 -->
          <RightToolBar v-model:showSearch="showSearch" @queryTable="getList"></RightToolBar>
        </el-row>
      </div>

      <!-- 数据展示表格 -->
      <div class="gyk-curd-table-box">
        <el-table :data="tableData" ref="commonCurdTableRef" v-loading="loading" border :max-height="tableMaxHeight"
          :height="tableHeight" @selection-change="handleSelectionChange" style="width: 100%"
          @header-contextmenu="headerRightClickEvent">
          <el-table-column v-if="selectable" prop="el_table_column_selection" type="selection" width="55"
            align="center" />
          <el-table-column v-if="showIndex" type="index" label="序号" width="80" prop="el_table_column_index" align="center"
            :index="indexMethod">
          </el-table-column>
          <!-- 表格列展示，正常展示 -->
          <el-table-column :title="item.columnComment" show-overflow-tooltip :key="`col_${index}`" align="center"
            v-for="(item, index) in showCommonQueryColumnList" :prop="showCommonDropColumnList[index].javaField"
            :min-width="showCommonDropColumnList[index].width ? showCommonDropColumnList[index].width : 100"
            :label="item.columnComment">
            <template #default="scope">
              <!-- 如果是字典，span字典展示 -->
              <span
                v-if="showCommonDropColumnList[index].dictType && isDictSpan(scope.row[showCommonDropColumnList[index]], showCommonDropColumnList[index], dictMap)">
                {{ getDictLabel(scope.row[showCommonDropColumnList[index].javaField], showCommonDropColumnList[index],
                  dictMap) }}
              </span>
              <!-- 如果是字典，tag字典展示 -->
              <el-tag v-else-if="showCommonDropColumnList[index].dictType" :type="getDictClass(scope.row[showCommonDropColumnList[index].javaField], showCommonDropColumnList[index], dictMap) == 'primary'
                ? ''
                : getDictClass(scope.row[showCommonDropColumnList[index].javaField], showCommonDropColumnList[index], dictMap)
                ">{{ getDictLabel(scope.row[showCommonDropColumnList[index].javaField],
    showCommonDropColumnList[index], dictMap) }}</el-tag>
              <!-- 如果是外键 -->
              <span v-else-if="showCommonDropColumnList[index].isForeignKey == '1'">{{
                getForeignKeyLabel(showCommonDropColumnList[index],
                  scope.row) }}</span>
              <!-- 文本展示 -->
              <span v-else>{{ scope.row[showCommonDropColumnList[index].javaField] }}</span>
            </template>
          </el-table-column>

          <!-- 表格行按钮 -->
          <el-table-column class="fileter-sort" prop="el_table_column_operation" v-if="tableRowButtonList.length > 0"
            label="操作" fixed="right" :min-width="tableRowButtonList.length * 100" align="center"
            class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button style="margin-bottom: 5px;" v-for="item in tableRowButtonList" :key="item.menuId"
                :type="item.sysButtonOption.type" plain :icon="item.sysButtonOption.icon" size="small"
                @click="_btnClickEvent(item, scope.row)" v-hasPermi="[item.perms]">
                {{ item.sysButtonOption.name }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页组件 -->
      <div class="gyk-pagination-container">
        <Pagination v-show="total > 0" :total="total" v-model:page="searchForm.pageNo" v-model:limit="searchForm.pageSize"
          @pagination="getList" />
      </div>

      <!-- 新增修改弹窗 -->
      <div class="gyk-common-dialog">
        <el-dialog :title="title" width="70%" modal :close-on-click-modal="false" v-model="open">
          <div class="gyk-common-dialog-container" v-loading="editDialogLoading">
            <el-form ref="formRef" :model="form" :rules="rules" :label-width="labelWidth">
              <el-row class="assign-container">
                <el-col :key="index" class="line-after" v-for="(t, index) in editColumnInfoList" :span="12">
                  <!-- 判断是否外键约束字段，这种是直接获取数据的 -->
                  <el-form-item style="text-align: center !important;" v-if="editColumnInfoList[index].isForeignKey == '1'
                    && foreignKeyMap[editColumnInfoList[index].javaField]
                    && foreignKeyMap[editColumnInfoList[index].javaField].dataList"
                    :label="editColumnInfoList[index].columnComment" :prop="editColumnInfoList[index].javaField">
                    <!-- 外键约束，就是选择框 -->
                    <el-select filterable v-model="form[editColumnInfoList[index].javaField]">
                      <el-option :key="item[foreignKeyMap[editColumnInfoList[index].javaField].option.value]"
                        v-for="item in foreignKeyMap[editColumnInfoList[index].javaField].dataList"
                        :value="item[foreignKeyMap[editColumnInfoList[index].javaField].option.value]"
                        :label="item[foreignKeyMap[editColumnInfoList[index].javaField].option.label]"></el-option>
                    </el-select>
                  </el-form-item>

                  <!-- 判断是否外键约束字段，这种外键是跟表其他字段关联的 -->
                  <el-form-item style="text-align: center !important;"
                    v-else-if="isUnionMasterColumn(editColumnInfoList[index])"
                    :label="editColumnInfoList[index].columnComment" :prop="editColumnInfoList[index].javaField">
                    <!-- 外键约束，就是选择框 -->
                    <el-select filterable v-model="form[editColumnInfoList[index].javaField]">
                      <el-option :key="item[foreignKeyMap[editColumnInfoList[index].javaField].option.value]"
                        v-for="item in foreignKeyMap[editColumnInfoList[index].javaField][getUnionColumnValue(editColumnInfoList[index])]"
                        :value="item[foreignKeyMap[editColumnInfoList[index].javaField].option.value]"
                        :label="item[foreignKeyMap[editColumnInfoList[index].javaField].option.label]"></el-option>
                    </el-select>
                  </el-form-item>

                  <!-- 其他的 -->
                  <el-form-item style="text-align: center !important;" v-else
                    :label="editColumnInfoList[index].columnComment" :prop="editColumnInfoList[index].javaField">
                    <!-- 输入框 -->
                    <el-input v-if="editColumnInfoList[index].htmlType == 'input'"
                      v-model="form[editColumnInfoList[index].javaField]"
                      :placeholder="`请输入${editColumnInfoList[index].columnComment}`" />
                    <!-- 图片上传 -->
                    <ImageUpload v-else-if="editColumnInfoList[index].htmlType == 'imageUpload'"
                      v-model="form[editColumnInfoList[index].javaField]" />
                    <!-- 文件上传 -->
                    <FileUpload v-else-if="editColumnInfoList[index].htmlType == 'fileUpload'"
                      v-model="form[editColumnInfoList[index].javaField]" />
                    <!-- 富文本编辑器 -->
                    <Editor v-else-if="editColumnInfoList[index].htmlType == 'editor'
                      " v-model="form[editColumnInfoList[index].javaField]" :min-height="192" />
                    <!-- 字典select，数字类型 -->
                    <el-select v-else-if="editColumnInfoList[index].htmlType ==
                      'select' &&
                      editColumnInfoList[index].dictType &&
                      (editColumnInfoList[index].javaType ==
                        'Integer' ||
                        editColumnInfoList[index].javaType ==
                        'Long')
                      " v-model="form[editColumnInfoList[index].javaField]"
                      :placeholder="`请选择${editColumnInfoList[index].columnComment}`">
                      <el-option v-for="dict in dictMap.get(editColumnInfoList[index].dictType)" :key="dict.dictValue"
                        :label="dict.dictLabel" :value="parseInt(dict.dictValue)"></el-option>
                    </el-select>

                    <!-- 字典select，字符串类型 -->
                    <el-select v-else-if="editColumnInfoList[index].htmlType == 'select' &&
                      editColumnInfoList[index].dictType &&
                      !(
                        editColumnInfoList[index].javaType == 'Integer' ||
                        editColumnInfoList[index].javaType == 'Long'
                      )
                      " v-model="form[editColumnInfoList[index].javaField]"
                      :placeholder="`请选择${editColumnInfoList[index].columnComment}`">
                      <el-option v-for="dict in dictMap.get(editColumnInfoList[index].dictType)" :key="dict.dictValue"
                        :label="dict.dictLabel" :value="dict.dictValue"></el-option>
                    </el-select>
                    <!-- 字典checkbox -->
                    <el-checkbox-group v-else-if="editColumnInfoList[index].htmlType ==
                      'checkbox' &&
                      editColumnInfoList[index].dictType
                      " v-model="form[editColumnInfoList[index].javaField]">
                      <el-checkbox v-for="dict in dictMap.get(editColumnInfoList[index].dictType)" :key="dict.dictValue"
                        :label="dict.dictValue">
                        {{ dict.dictLabel }}
                      </el-checkbox>
                    </el-checkbox-group>
                    <!-- 字典radio，数字类型 -->
                    <el-radio-group v-else-if="editColumnInfoList[index].htmlType == 'radio' &&
                      editColumnInfoList[index].dictType &&
                      (editColumnInfoList[index].javaType ==
                        'Integer' ||
                        editColumnInfoList[index].javaType ==
                        'Long')
                      " v-model="form[editColumnInfoList[index].javaField]">
                      <el-radio v-for="dict in dictMap.get(editColumnInfoList[index].dictType)" :key="dict.dictValue"
                        :label="parseInt(dict.dictValue)">
                        {{ dict.dictLabel }}
                      </el-radio>
                    </el-radio-group>
                    <!-- 字典radio，字符串类型 -->
                    <el-radio-group v-else-if="editColumnInfoList[index].htmlType ==
                      'radio' &&
                      editColumnInfoList[index].dictType &&
                      !(
                        editColumnInfoList[index].javaType ==
                        'Integer' ||
                        editColumnInfoList[index].javaType == 'Long'
                      )
                      " v-model="form[editColumnInfoList[index].javaField]">
                      <el-radio v-for="dict in dictMap.get(editColumnInfoList[index].dictType)" :key="dict.dictValue"
                        :label="dict.dictValue">
                        {{ dict.dictLabel }}
                      </el-radio>
                    </el-radio-group>
                    <!-- 时间选择器 -->
                    <el-date-picker v-else-if="editColumnInfoList[index].htmlType ==
                      'datetime'
                      " clearable v-model="form[editColumnInfoList[index].javaField]" type="date"
                      value-format="yyyy-MM-dd" :placeholder="`请选择${editColumnInfoList[index].columnComment}`">
                    </el-date-picker>
                    <!-- 文本域 -->
                    <el-input v-else-if="editColumnInfoList[index].htmlType == 'textarea'
                      " v-model="form[editColumnInfoList[index].javaField]" type="textarea" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>

          <div slot="footer" class="dialog-footer footer-wrapper">
            <el-button type="primary" :disabled="editDialogLoading" @click="submitForm">确定</el-button>
            <el-button @click="cancel">取消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CommonSearchBox from '../CommonSearchBox/index.vue'
import RightToolBar from '../RightToolBar/index.vue'
import Pagination from '../Pagination/index.vue'
import ImageUpload from '../ImageUpload/index.vue'
import FileUpload from '../FileUpload/index.vue'
import Editor from '../Editor/index.vue'
import { getCurrentInstance, reactive, ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { dictTypeService, dictDataService, genService, menuService, request } from '@gyk/gyk-api'
import { gykCore } from "@gyk/gyk-utils"
import { ElMessageBox, ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

/*****************所有的props***************** */
const defProps = withDefaults(defineProps<{
  // 表格最大高度
  tableMaxHeight?: string,
  // 表格高度
  tableHeight?: string,
  // 是否展示多选框
  selectable?: boolean,
  // 是否展示序号
  showIndex?: boolean,
  // storeTemplate对象
  templateStore: any,
  // storeDict对象
  dictStore: any,
}>(), {
  tableMaxHeight: '100%',
  tableHeight: '100%',
  selectable: true,
  showIndex: true,
});

// 根据dictStore获取需要的字典
defProps.dictStore.dicts(['sys_java_type'])

/*****************所有的ref、reactive对象***************** */
// 是否展示右键菜单
const showRightClickMenu = ref(false)
// 右键菜单展示得抽屉标题
const drawerTitle = ref("详情")
// 右键菜单是否展示
const drawerVisible = ref(false)
// 配置列表单
const columnForm = ref<any>({})
// 菜单表单Label宽度
const columnFormLabelWidth = ref("150px")
// 菜单表单是否禁用
const columnFormDisabled = ref(false)
// 菜单表单提交按钮是否展示
const columnFormSubmitBtnVisible = ref(false)
// 菜单表单是否提交中
const columnFormLoading = ref(false)
// 右键单击的列
const contextNode = ref<any>({})
// 外键选项弹窗开关
const foreignKeyOptionOpen = ref(false)
// foreignKeyOption中的列选项
const foreignKeyGenTableColumnOptions = ref<any>([])
// 外键选项表单
const foreignKeyOptionForm = reactive<any>({
  params: []
})
// 路由对象
const route = useRoute()
// 当前的实例对象
const app = getCurrentInstance()
// 菜单id
const menuId = ref<any>('')
menuId.value = route.query.menuId
// 按钮的查询条件
const buttonMenuQuery = reactive<any>({})
buttonMenuQuery.parentId = menuId.value
// 是否显示查询表单
const showSearch = ref(true);
// 字典选项列表
const dictOptions = ref<any>([])
// 代码生成表列表
const genTableList = ref<any>([])
// 按钮菜单列表
const buttonMenuList = ref<any>([])
// 表格上面的按钮列表
const tableTopButtonList = ref<any>([])
// 表格行按钮
const tableRowButtonList = ref<any>([])
// 当前的菜单对象
const currentMenu = ref<any>({})
// 代码生成表信息
const genTableInfo = ref<any>({})
// 代码生成列信息列表
const genTableColumnList = ref<any>([])
// 主键java字段
const pkJavaField = ref('')
// 查询列信息
const searchColumnInfoList = ref<any>([])
// 初始化查询表单 
const initSearchForm = ref<any>({
  pageNo: 1,
  pageSize: 10,
})
// 修改列信息列表
const editColumnInfoList = ref<any>([])
// 初始化表单
const initForm = ref<any>({})
// 显示公共查询列列表
const showCommonQueryColumnList = ref<any>([])
// 显示拖拽列列表
const showCommonDropColumnList = ref<any>([])
// 表单校验规则
const rules = ref<any>({})
// 字典数据
const dictMap = reactive<Map<string, any>>(new Map())
// 外键列列表
const foreignKeyColumnList = ref<any>([])
// 所有外键列对应的主表数据
const foreignKeyMap = ref<any>({})
// 查询表单
const searchForm = ref<any>({
  pageNo: 1,
  pageSize: 10,
})
// 表格是否在加载
const loading = ref(false)
// 页面加载中
const pageLoading = ref(true)
// 表格数据
const tableData = ref<any>([])
// 总数据量
const total = ref(0)
// 编辑弹窗是否正在加载中
const editDialogLoading = ref(false)
// 编辑弹窗高度
const dialogHeight = ref('500px')
// 选中的表格ids
const ids = ref<any>([])
// 表格引用对象
const commonCurdTableRef = ref()
// 自定义方法
const customerMethod = ref<any>({})
// 非单个禁用
const single = ref(true)
// 非多个禁用
const multiple = ref(true)
// 新增修改弹窗是否打开
const open = ref(false)
// 提交表单
const form = ref<any>({})
// 表单对象
const formRef = ref<FormInstance>()
// 表单label宽度
const labelWidth = 160
// 弹窗标题
const title = ref('新增')
// 保存本地方法
const nativeMethods = {
  /** 新增按钮操作 */
  handleAdd: () => {
    open.value = true;
    title.value = "添加";
  },
  /** 修改按钮操作 */
  handleUpdate(row) {
    const id = row.id || ids.value;
    const info = defProps.templateStore.templateInfo.get(menuId.value);
    editDialogLoading.value = true;
    request({
      url: info.getById.url + `/${id}`,
      method: info.getById.method,
    }).then((response) => {
      editDialogLoading.value = false;
      form.value = response.data;
      open.value = true;
      title.value = "修改";
    });
  },
  /** 删除按钮操作 */
  handleDelete(row) {
    const idsValue = row.id || ids.value;
    ElMessageBox.confirm('是否确认删除编号为"' + idsValue + '"的数据项？', '系统提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {
      const info = defProps.templateStore.templateInfo.get(menuId.value);
      request({
        url: info.delete.url + `/${idsValue}`,
        method: info.delete.method,
      }).then(response => {
        getList();
        ElMessage({ message: '删除成功', type: 'error' });
      });
    }).catch(() => {

    })
  },
  /** 导出按钮操作 */
  handleExport() {
    const info = defProps.templateStore.templateInfo.get(menuId.value);
    app?.proxy?.download(info.export.url, {
      ...searchForm
    }, `${genTableInfo.value.businessName}_#[[${new Date().getTime()}]]#.xlsx`)
  },
}

/*****************所有的方法***************** */
// 初始化配置表单列
const initColumnForm = () => {
  columnForm.value = {
    columnId: "",
    tableId: "",
    tableComment: "",
    columnName: "",
    columnComment: "",
    columnType: "",
    javaType: "",
    javaField: "",
    isPk: "0",
    isIncrement: "0",
    isRequired: "0",
    isInsert: "1",
    isEdit: "1",
    isList: "1",
    isQuery: "1",
    isFrontQuery: "0",
    isForeignKey: "0",
    foreignKeyOption: `{"tableName": "", "value": "", "label": ""}`,
    queryType: "LIKE",
    htmlType: "",
    dictType: "",
    width: "",
    sort: "",
  };
}
// 构建列表单
const buildColumnForm = () => {
  // 先初始化
  initColumnForm();
  // 找到右键列的prop属性
  var prop = contextNode.value.property;
  var selectData = {};
  for (var i in genTableColumnList.value) {
    var columnInfo = genTableColumnList.value[i];
    if (columnInfo.javaField == prop) {
      selectData = columnInfo;
      break;
    }
  }
  for (var i in columnForm.value) {
    columnForm.value[i] = selectData[i];
  }
  columnForm.value.tableComment = genTableInfo.value.tableComment;
}

// 关闭抽屉，并将参数初始化
const cancelColumnForm = () => {
  // 抽屉是否可见
  drawerVisible.value = false;
  // 表单是否禁用
  columnFormDisabled.value = false;
  // 表单提交按钮是否展示
  columnFormSubmitBtnVisible.value = false;
  // 表单是否提交中
  columnFormLoading.value = false;
  // 表单置空
  initColumnForm();
}

// 列详情
const menuDetails = () => {
  drawerVisible.value = true;
  drawerTitle.value = "详情";
  columnFormDisabled.value = true;
  columnFormSubmitBtnVisible.value = false;
  buildColumnForm();
}
// 添加列
const menuAdd = () => {
  drawerVisible.value = true;
  drawerTitle.value = "添加";
  columnFormDisabled.value = false;
  columnFormSubmitBtnVisible.value = true;
  initColumnForm();
  columnForm.value.tableComment = genTableInfo.value.tableComment;
}
// 修改列
const menuEdit = () => {
  drawerVisible.value = true;
  drawerTitle.value = "修改";
  columnFormDisabled.value = false;
  columnFormSubmitBtnVisible.value = true;
  buildColumnForm();
}
// 修改所有配置
const editAllInfo = () => {
  const params = { pageNum: 1 };
  app?.proxy?.$tag.openPage(
    "修改[" + genTableInfo.value.tableName + "]生成配置",
    "/tool/gen-edit/index/" + genTableInfo.value.tableId,
    params
  );
}
// 前端不展示
const frontNoShow = () => {
  buildColumnForm();
  // 设置前端不显示
  columnForm.value.isList = "0";
  genService.saveOrUpdateGenColumn(columnForm.value).then((response) => {
    if (response.code === 200) {
      ElMessage({ message: response.msg as string, type: 'success' });
    } else {
      ElMessage({ message: response.msg as string, type: 'error' });
    }
    // 重新加载列数据
    getGenTableColumnByTableId(currentMenu.value.tableId);
    // 关闭抽屉
    cancelColumnForm();
  });
}
// 删除列
const menuDelete = () => {
  buildColumnForm();
  ElMessageBox.confirm('是否确认删除"' + columnForm.value.javaField + '"的列？', '系统提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {
    genService.removeColumns(columnForm.value.columnId);
  })
}

// 点击外键输入框
const clickForeignKeyInput = () => {
  // 弹窗展示要输入的option
  foreignKeyOptionOpen.value = true;
  // 将获取到的columnForm.foreignKeyOption转化为对象
  if (columnForm.value.foreignKeyOption) {
    const foreignKeyOption = JSON.parse(columnForm.value.foreignKeyOption);
    for (let key in foreignKeyOption) {
      if (key == 'tableId' && foreignKeyOption[key]) {
        genService.columnListByTableId(foreignKeyOption[key]).then(response => {
          foreignKeyGenTableColumnOptions.value = response.data;
        })
      }
      foreignKeyOptionForm[key] = foreignKeyOption[key];
    }
  }
}

// 列表单提交事件
const columnFormBtnSubmitEvent = () => {
  if (!columnFormLoading.value) {
    columnFormLoading.value = true;
    // 提交菜单表单
    genService.saveOrUpdateGenColumn(columnForm.value).then((response) => {
      if (response.code === 200) {
        ElMessage({ message: response.msg as string, type: 'success' });
      } else {
        ElMessage({ message: response.msg as string, type: 'error' });
      }
      // 重新加载列数据
      getGenTableColumnByTableId(currentMenu.value.tableId);
      // 关闭抽屉
      cancelColumnForm();
    });
  }
}

// 关闭右键菜单
const closeTreeMenu = () => {
  showRightClickMenu.value = false
}

// keydown事件
const quicklyKeyEvents = (e) => {
  // 当右键显示的时候才触发
  if (showRightClickMenu.value) {
    let isKeyDown = false;
    if (!isKeyDown) {
      let keyCode = e.key.toUpperCase();
      if (keyCode == "S") {
        // 按下了s键，我们就不展示该列
        isKeyDown = true;
        frontNoShow();
      } else if (keyCode == "P") {
        isKeyDown = true;
        menuDetails();
      } else if (keyCode == "I") {
        isKeyDown = true;
        menuAdd();
      } else if (keyCode == "E") {
        isKeyDown = true;
        menuEdit();
      } else if (keyCode == "D") {
        isKeyDown = true;
        menuDelete();
      } else if (keyCode == "A") {
        isKeyDown = true;
        editAllInfo();
      }
    }
    // 如果按对了就关闭右键菜单，移除事件
    if (isKeyDown) {
      closeTreeMenu();
      document.removeEventListener("keydown", quicklyKeyEvents);
    }
  }
}

// 表格头按钮事件
const headerRightClickEvent = (column, event) => {
  // 取消冒泡和默认事件
  event.preventDefault()
  event.stopPropagation()
  var prop = column.property
  // 表示右击的是序号列，则展示所有的数据列列表
  if (prop == "el_table_column_index" || prop == "el_table_column_selection" || prop == 'el_table_column_operation') {
    return
  }
  showRightClickMenu.value = true // 显示菜单
  contextNode.value = column
  const div = document.querySelector(".gyk-right-click-menu") as HTMLElement
  div.style.top = event.clientY + "px"
  div.style.left = event.clientX + "px"
  // 页面添加点击和右键事件，用来关闭右键菜单
  document.addEventListener("click", closeTreeMenu)
  document.addEventListener("contextmenu", closeTreeMenu)
  // 给页面添加一个监听键盘的事件
  document.addEventListener("keydown", quicklyKeyEvents)
}

// 初始化查询列表单
const initSearchFormFunc = () => {
  // 深拷贝，防止出现输入框无法输入的情况
  searchForm.value = { ...initSearchForm.value }
}

/** 查询字典下拉列表 */
dictTypeService.optionselect().then(res => {
  dictOptions.value = res.data
})


/** 获取所有的genTable */
genService.listTableNoPage({}).then(response => {
  genTableList.value = response.data;
});

// 获取按钮菜单
const getButtonMenu = () => {
  menuService.listMenu(buttonMenuQuery).then((response) => {
    buttonMenuList.value = response.data;
    for (let i in buttonMenuList.value) {
      const item = buttonMenuList.value[i];
      // 获取所有表格上的按钮
      if (item.sysButtonOption.isTableTop == "Y") {
        tableTopButtonList.value.push(item);
      }
      // 获取所有行按钮
      if (item.sysButtonOption.isTableRow == "Y") {
        tableRowButtonList.value.push(item);
      }
    }
  });
}

const resetColumnOptions = () => {
  // 初始化列的相关配置
  genTableInfo.value = {};
  genTableColumnList.value = [];
  pkJavaField.value = "";
  searchColumnInfoList.value = [];
  initSearchForm.value = {
    pageNo: 1,
    pageSize: 10,
  };
  editColumnInfoList.value = [];
  initForm.value = {};
  showCommonQueryColumnList.value = [];
  showCommonDropColumnList.value = [];
  rules.value = {};
}

const getList = () => {
  const info = defProps.templateStore.templateInfo.get(menuId.value);
  const listUrl = info.list.url;
  loading.value = true;
  request({
    url: listUrl,
    method: "get",
    params: searchForm.value,
  }).then((response) => {
    loading.value = false
    tableData.value = response.data.rows
    total.value = response.data.total
  })
}

/** 重置按钮操作 */
const resetQuery = () => {
  initSearchFormFunc()
  getList()
}

// 获取所有的列
const getGenTableColumnByTableId = (tableId) => {
  resetColumnOptions();
  pageLoading.value = true;
  genService.getGenTable({ tableId: tableId }).then((response) => {
    pageLoading.value = false
    const data = response.data;
    const info = data.info;
    genTableInfo.value = info;
    genTableColumnList.value = data.rows;
    // 拼接请求List的后台路径
    let baseUrl = "";
    if (info.systemName) {
      baseUrl = `/${info.systemName}`;
    }
    baseUrl += `/${info.moduleName}/${info.businessName}`;
    if (!defProps.templateStore.templateInfo.has(menuId.value)) { // 如果不存在，就添加，并获取所有数据
      // pinia存储数据
      defProps.templateStore.setTemplateInfo({
        key: menuId.value,
        value: {
          baseUrl: baseUrl,
          list: {
            url: baseUrl + "/list",
            method: "get",
          },
          getById: {
            url: baseUrl,
            method: "get",
          },
          add: {
            url: baseUrl,
            method: "post",
          },
          update: {
            url: baseUrl,
            method: "put",
          },
          delete: {
            url: baseUrl,
            method: "delete",
          },
          export: {
            url: baseUrl + "/export",
          },
        },
        getList: getList
      })
    } else {
      getList()
    }

    // 遍历所有的数据
    for (let i in data.rows) {
      const item = data.rows[i];
      // 获取主键列
      if (item.isPk == "1") {
        pkJavaField.value = item.javaField;
      }
      // 获取所有查询列的列表
      if (item.isFrontQuery == "1") {
        searchColumnInfoList.value.push(item);
        initSearchForm.value[item.javaField] = "";
      }
      // 获取所有的字典
      if (item.dictType) {
        // 判断dictMap中是否存在该字典
        if (!dictMap.has(item.dictType)) {
          dictMap.set(item.dictType, [])
        }
      }
      // 初始化所有的可编辑的字段
      if (item.isEdit == "1") {
        editColumnInfoList.value.push(item);
        initForm.value[item.javaField] = "";
      }
      // 获取所有要显示的列
      if (item.isList == "1") {
        showCommonQueryColumnList.value.push(item);
        showCommonDropColumnList.value.push(item);
      }
      // 获取所有必填项目
      if (item.isRequired == "1") {
        // 添加校验规则
        const rule = {
          required: true,
          message: `${item.columnComment}不能为空`,
          trigger: "blur",
        };
        if (item.htmlType == "select" || item.htmlType == "radio") {
          rule.trigger = "change";
        }
        rules.value[item.javaField] = [rule]
      }
      // 获取外键列
      if (item.isForeignKey == '1') {
        // 获取所有的外键列
        foreignKeyColumnList.value.push(item);
      }
    }

    // 从pinia中获取dict数据
    const keys = Array.from(dictMap.keys())
    defProps.dictStore.dicts(keys).then(resMap => {
      for (let i in keys) {
        const key = keys[i]
        dictMap.set(key, resMap.get(key))
      }
    })
    // 保存所有相同接口的列
    let sameApiForeignKeyColumnMap = {};
    let sameTableIdForeignKeyColumnMap = {};
    // 获取所有外键列后，遍历，获取数据，不要重复获取数据
    for (let i in foreignKeyColumnList.value) {
      const columnItem = foreignKeyColumnList.value[i];
      const foreignKeyOption = JSON.parse(columnItem.foreignKeyOption);
      if (foreignKeyOption.isCustomerOption == 'Y') {
        if (foreignKeyOption.foreignKeyUnionCurrentColumn) { // 外键表字段关联的是自己表的字段
          const mbi = {
            requestUrl: foreignKeyOption.requestUrl,
            requestMethod: foreignKeyOption.requestMethod,
            foreignKeyOption: foreignKeyOption,
            masterJavaField: foreignKeyOption.foreignKeyUnionCurrentColumn,
            subJavaField: columnItem.javaField,
            queryColumn: foreignKeyOption.queryColumn,
            isPathVariable: foreignKeyOption.isPathVariable
          }
          if (initForm.value.foreignKeyUnionCurrentColumnList) {
            initForm.value.foreignKeyUnionCurrentColumnList.push(mbi)
          } else {
            initForm.value.foreignKeyUnionCurrentColumnList = [mbi]
          }
          foreignKeyMap.value[columnItem.javaField] = { option: foreignKeyOption, emptyDataList: [] }
        } else { // 没有关联自己的的外键列，则加入到map中
          if (sameApiForeignKeyColumnMap[foreignKeyOption.requestUrl]) {
            sameApiForeignKeyColumnMap[foreignKeyOption.requestUrl].columnList.push(columnItem);
          } else {
            sameApiForeignKeyColumnMap[foreignKeyOption.requestUrl] = { option: foreignKeyOption, columnList: [columnItem] }
          }
        }
      } else { // 根据表id获取表的信息
        if (sameTableIdForeignKeyColumnMap[foreignKeyOption.tableId]) {
          sameTableIdForeignKeyColumnMap[foreignKeyOption.tableId].columnList.push(columnItem);
        } else {
          sameTableIdForeignKeyColumnMap[foreignKeyOption.tableId] = { option: foreignKeyOption, columnList: [columnItem] }
        }
      }
    }

    // 遍历所有接口
    for (let requestUrl in sameApiForeignKeyColumnMap) {
      let columnList = sameApiForeignKeyColumnMap[requestUrl].columnList;
      const foreignKeyOption = sameApiForeignKeyColumnMap[requestUrl].option;
      request({
        url: foreignKeyOption.requestUrl,
        method: foreignKeyOption.requestMethod,
      }).then(response => {
        for (let index in columnList) {
          const columnItem = columnList[index];
          foreignKeyMap.value[columnItem.javaField] = { option: foreignKeyOption, dataList: response.data }
        }
      })
    }

    // 遍历所有表id
    for (let tableId in sameTableIdForeignKeyColumnMap) {
      let columnList = sameTableIdForeignKeyColumnMap[tableId].columnList;
      const foreignKeyOption = sameTableIdForeignKeyColumnMap[tableId].option;
      // 根据表id获取表的信息
      genService.getGenTable({ tableId: tableId }).then(response => {
        if (response.data && response.data.info) {
          const data = response.data;
          const tableInfo = data.info;
          let requestUrl = "";
          if (tableInfo.systemName) {
            requestUrl = `/${tableInfo.systemName}`;
          }
          requestUrl += `/${tableInfo.moduleName}/${tableInfo.businessName}/listNoPage`;
          // 根据获取到的tableInfo，请求listNoPage页面，获取所有的数据
          request({
            url: requestUrl,
            method: 'get'
          }).then(response => {
            for (let index in columnList) {
              const columnItem = columnList[index];
              foreignKeyMap.value[columnItem.javaField] = { option: foreignKeyOption, dataList: response.data }
            }
          })
        }
      })
    }
  });
}

// 根据菜单id，获取菜单相关配置
const getCurrentMenu = () => {
  menuService.getMenu({ menuId: menuId.value }).then((response) => {
    currentMenu.value = response.data;
    getGenTableColumnByTableId(currentMenu.value.tableId);
  });
}

// 重置表单校验
const resetForm = () => {
  formRef?.value?.resetFields()
}

// 表单重置
const reset = () => {
  // 深拷贝，防止出现输入框无法输入的情况
  form.value = { ...initForm.value };
  resetForm();
}


// 该外键是否关联主表列
const isUnionMasterColumn = (column) => {
  if (column.isForeignKey == '1') {
    const foreignKeyOption = JSON.parse(column.foreignKeyOption);
    if (foreignKeyOption.foreignKeyUnionCurrentColumn) {
      return true;
    }
  }
  return false;
}

// 提交表单
const submitForm = () => {
  formRef?.value?.validate((valid) => {
    if (valid) {
      const info = defProps.templateStore.templateInfo.get(menuId.value);
      editDialogLoading.value = true;
      if (form.value[pkJavaField.value]) {
        request({
          url: info.update.url,
          method: info.update.method,
          data: form.value,
        }).then((response) => {
          editDialogLoading.value = false;
          ElMessage({ message: '修改成功', type: 'success' })
          open.value = false
          getList()
        });
      } else {
        request({
          url: info.add.url,
          method: info.add.method,
          data: form.value,
        }).then((response) => {
          editDialogLoading.value = false;
          ElMessage({ message: '新增成功', type: 'success' })
          open.value = false
          getList()
        });
      }
    }
  });
}

// 取消提交
const cancel = () => {
  open.value = false;
  reset();
}

// 按钮的点击事件
const _btnClickEvent = (buttonMenu: any, row?: any) => {
  // 判断code有没有值，没有值就直接执行该页面有的方法
  if (!buttonMenu.sysButtonOption.clickMethodCode) {
    nativeMethods[buttonMenu.sysButtonOption.clickMethodName](row);
  } else { // 如果code有值，说明时自定义方法
    if (customerMethod[buttonMenu.sysButtonOption.clickMethodName]) {
      customerMethod[buttonMenu.sysButtonOption.clickMethodName](row, menuId.value, app, request, buttonMenu.sysButtonOption);
    } else {
      // 先将code转化为方法
      gykCore.dynamicLoadScript(buttonMenu.sysButtonOption.clickMethodName, buttonMenu.sysButtonOption.clickMethodCode);
      customerMethod[buttonMenu.sysButtonOption.clickMethodName] = window[buttonMenu.sysButtonOption.clickMethodName]
      customerMethod[buttonMenu.sysButtonOption.clickMethodName](row, menuId.value, app, request, buttonMenu.sysButtonOption);
    }
  }
}

// 表格行元素点击事件
const clickCommonCurdTableRow = (row) => {
  commonCurdTableRef.value.toggleRowSelection(row);
}

// 根据列信息获取其关联的列
const getUnionColumnValue = (column) => {
  const foreignKeyOption = JSON.parse(column.foreignKeyOption);
  if (foreignKeyOption && foreignKeyOption.foreignKeyUnionCurrentColumn) {
    if (form.value[foreignKeyOption.foreignKeyUnionCurrentColumn]) {
      return form.value[foreignKeyOption.foreignKeyUnionCurrentColumn];
    } else {
      return "emptyDataList";
    }
  }
}

// 判断按钮是否禁用
const buttonDisabled = (buttonMenu) => {
  if (buttonMenu.sysButtonOption.name == "修改") {
    return single.value;
  } else if (buttonMenu.sysButtonOption.name == "删除") {
    return multiple.value;
  }
  return false;
}

// 多选框选中数据
const handleSelectionChange = (selection) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}

// 序号展示方法
const indexMethod = (index) => {
  let pageNo = searchForm.value.pageNo;
  let pageSize = searchForm.value.pageSize;
  return (pageNo - 1) * pageSize + index + 1;
}

// 判断是否是否字典的span标签
const isDictSpan = (value, column, dictMap) => {
  if (dictMap.get(column.dictType)) {
    for (let i in dictMap.get(column.dictType)) {
      const dict = dictMap.get(column.dictType)[i];
      if (value == dict.dictValue) {
        if (dict.listClass == "" || dict.listClass == "default") {
          return true;
        }
      }
    }
  }
  return false;
}

// 获取字典样式
const getDictClass = (value, column, dictMap) => {
  if (dictMap.get(column.dictType)) {
    for (let i in dictMap.get(column.dictType)) {
      const dict = dictMap.get(column.dictType)[i];
      if (dict.dictValue == value) {
        return dict.listClass;
      }
    }
  }
}

// 获取字典值
const getDictLabel = (value, column, dictMap) => {
  if (dictMap.get(column.dictType)) {
    for (let i in dictMap.get(column.dictType)) {
      const dict = dictMap.get(column.dictType)[i];
      if (dict.dictValue == value) {
        return dict.dictLabel;
      }
    }
  }
}

// 外键列获取其展示值
const getForeignKeyLabel = (column, row) => {
  if (column.isForeignKey == '1') {
    const foreignKeyOption = JSON.parse(column.foreignKeyOption);
    if (foreignKeyOption && foreignKeyOption.foreignKeyUnionCurrentColumn) { // 如果当前外键关联主表某个字段
      if (foreignKeyMap.value[column.javaField] && foreignKeyMap.value[column.javaField][row[foreignKeyOption.foreignKeyUnionCurrentColumn]]) { // 如果已经获取过dataList了
        const dataList = foreignKeyMap.value[column.javaField][row[foreignKeyOption.foreignKeyUnionCurrentColumn]];
        for (let i in dataList) {
          const item = dataList[i];
          if (item[foreignKeyOption.value] == row[column.javaField]) {
            return item[foreignKeyOption.label];
          }
        }
      }
    }
    if (foreignKeyMap.value[column.javaField] && foreignKeyMap.value[column.javaField].dataList) {
      const dataList = foreignKeyMap.value[column.javaField].dataList;
      for (let i in dataList) {
        const item = dataList[i];
        if (item[foreignKeyOption.value] == row[column.javaField]) {
          return item[foreignKeyOption.label]
        }
      }
    }
  }
  return row[column.javaField];
}


getButtonMenu()
getCurrentMenu()

// 页面渲染后，执行的方法
onMounted(() => {

})

</script>

<style lang="scss" scoped>
@include b(curd-template-container) {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--el-menu-bg-color);

  // 表格样式
  @include b(common-curd-table) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;

    @include b(right-click-menu) {
      position: fixed;
      z-index: 99999;
      top: 50%;
      left: 50%;
      overflow: hidden;
      border-radius: 5px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

      @include useTheme {
        background-color: getVar('menuItemBackgroundColor');
        color: getVar('menuItemColor');
        border: 1px solid getVar('borderColor');
      }

      div {
        padding: 3px 20px;
        box-sizing: border-box;
        text-align: center;

        &:hover {
          @include useTheme {
            background-color: getVar('menuItemActiveBackgroundColor');
            color: getVar('menuItemActiveColor');
          }

          cursor: pointer;
        }
      }
    }

    @include b(curd-table-box) {
      flex: 1;
      overflow: hidden;

      :deep(.el-table) {
        th {
          cursor: pointer;
        }
      }

      .top-right-btn {
        position: absolute;
        right: 15px;
      }
    }

    @include b(curd-btn-box) {
      padding: 15px 0;

      .top-right-btn {
        position: absolute;
        right: 10px;
      }
    }
  }

  // 分页样式
  @include b(pagination-container) {
    :deep(.el-pagination) {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
    }
  }

  // 弹窗样式
  @include b(common-dialog) {
    :deep(.el-dialog) {

      // 弹出窗口的头部
      .el-dialog__header {
        padding: 0px 35px;
        height: 80px;
        line-height: 80px;
        font-size: 20px;
        font-weight: 700;
        color: #2D2D2D;

        @include useTheme {
          border-bottom: 1px solid getVar('borderColor');
        }

        .el-dialog__headerbtn {
          top: 15px;
          right: 10px;
        }
      }

      // 弹窗窗口的内容部分
      .el-dialog__body {
        padding: 15px;

        @include b(common-dialog-container) {
          max-height: v-bind(dialogHeight);
          overflow: auto;
          padding: 15px;

          .el-row {

            @include useTheme {
              border-left: 1px solid getVar('editDialogBorderColor');
            }

            .el-col {
              min-height: 56px;

              &:nth-child(1) {
                @include useTheme {
                  border-top: 1px solid getVar('editDialogBorderColor');
                }
              }

              &:nth-child(2) {
                @include useTheme {
                  border-top: 1px solid getVar('editDialogBorderColor');
                }
              }

              .el-form-item {
                margin: 0;
                height: 100%;
                align-items: center;

                @include useTheme {
                  border-bottom: 1px solid getVar('editDialogBorderColor');
                  border-right: 1px solid getVar('editDialogBorderColor');
                }

                .el-form-item__label {
                  display: block;
                  min-height: 54px;
                  line-height: 54px;

                  @include useTheme {
                    border-right: 1px solid getVar('editDialogBorderColor');
                    background-color: getVar('editDialogLabelBgColor')
                  }

                }

                .el-input {
                  border: none;
                  box-shadow: none;

                  .el-input__wrapper {
                    border: none;
                    box-shadow: none;
                    min-height: 54px;
                  }

                }

                .el-form-item__error {
                  z-index: 999;
                }

                .el-select {
                  width: 100%;
                }

                .el-textarea__inner {
                  box-shadow: none;
                }
              }
            }
          }
        }


        // 底部按钮
        .dialog-footer {
          padding-top: 20px;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>